// 多主题
import { storage } from "@/utils/storage";
import { Module } from "vuex";

const types = {
  SET_THENE: "set_theme",
  SET_SKIN: "set_skin",
};
// state
const state = {
  theme: "default",
  skin: "default",
};

// getters
const getters = {
  // 获取当前主题
  getCurrentTheme(state) {
    return state.theme;
  },
  // 获取当前布局皮肤
  getCurrentSkin(state) {
    return state.skin;
  },
};

// mutations
const mutations = {
  // 设置主题
  [types.SET_THENE](state, theme) {
    if (theme) {
      state.theme = theme;
    } else {
      state.theme = "default";
    }
    setTheme(state.theme);
    storage.local.set(storage.events.theme, state.theme);
  },
  // 设置主题
  [types.SET_SKIN](state, skin) {
    if (skin) {
      state.skin = skin;
    } else {
      state.skin = "default";
    }
    storage.local.set(storage.events.skin, state.skin);
  },
};

// actions
const actions = {
  // 初始化主题
  initTheme() {
    let theme = storage.local.get(storage.events.theme);
    if (theme) {
      state.theme = theme;
    } else {
      state.theme = "default";
    }
    setTheme(state.theme);
    storage.local.set(storage.events.theme, state.theme);
  },
  // 设置当前主题
  setTheme({ commit }, theme) {
    commit(types.SET_THENE, theme);
  },
  // 初始化主题
  initSkin() {
    let skin = storage.local.get(storage.events.skin);
    if (skin) {
      state.skin = skin;
    } else {
      state.skin = "default";
    }
    storage.local.set(storage.events.skin, state.skin);
  },
  // 设置当前皮肤
  setSkin({ commit }, skin) {
    commit(types.SET_SKIN, skin);
  },
};

function setTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
}
const theme = {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

export default theme;
